<template>
  <view class="page">
    <view class="logo">
      <image src="../../static/logo.png" mode=""></image>
    </view>
    <!-- 填写区 -->
    <view class="input-info">
      <view class="info">
        <input type="tel" v-model="form.tel" maxlength="11" placeholder="手机号">
        <view class="more">

        </view>
      </view>
      <view class="info">
        <input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
        <view class="more">
          <text class="mo" @click="getPhoneCode">{{btnValue}}</text>
          <text class="mo" style="display: none">{{second}}秒后重试</text>
        </view>
      </view>
      <view class="info">
        <input :password='!isPassword' maxlength="26" v-model="form.passwd" placeholder="请输入密码">
        <view class="more">
          <text class="iconfont" :class="isPassword?'icon-eye-on':'icon-eye-off'" @click="isPassword = !isPassword"></text>
        </view>
      </view>
    </view>
    <!-- 按钮 -->
    <view class="btn-info">
      <view class="btn" :style="isRegister?'opacity:1':'opacity:0.4'" @click="isRegister?onRegister():''">
        <text>注册</text>
      </view>
    </view>
    <!-- 操作 -->
    <view class="operation">
      <text></text>
      <text @click="onLogin">已有账号?登录</text>
    </view>
  </view>
</template>

<script>
	import {sendMsgCode, registerUser} from '../../api/user/userApi.js'
export default {
  data() {
    return {
      isPassword: false,
      isRegister: false,
	  second:60,
	  btnValue:'获取验证码',
      // 表单
      form:{
        tel: '',
        code: '',
        password: '',
      },
    };
  },
  methods:{

    onLogin(){
      uni.redirectTo({
        url: '/pages/public/login'
      })
    },
	getPhoneCode:function(){
		let _that = this;
		if(!this.form.tel){
			this.vc.toast({
				icon:'none',
				title:'请先填写手机号'
			});
			return;
		}
		sendMsgCode(this.form.tel)
		.then(_data=>{
			_that.timer();
		})
		
	},
	timer: function() {
		let promise = new Promise((resolve, reject) => {
			let setTimer = setInterval(
				() => {
					var second = this.second - 1;
					this.second = second;
					this.btnValue = second + '秒';
					this.btnDisabled = true;
					if (this.second <= 0) {
						this.second = 60;
						this.btnValue = '获取验证码';
						this.btnDisabled = false;
						resolve(setTimer)
					}
				}, 1000)
		})
		promise.then((setTimer) => {
			clearInterval(setTimer)
		})
	},
    /**
     * 注册点击
     */
    onRegister(){
			 let that = this;
		registerUser(this.form)
		.then(_data =>{
			uni.redirectTo({
			  url: '/pages/public/login'
			})
		},
		err =>{
			that.vc.toast({
				icon:'none',
				title:err
			})
		})
    }
  },
  watch:{
    form:{
      handler(newValue, oldValue) {
        if(newValue.tel && newValue.code && newValue.passwd){
          this.isRegister = true;
        }else{
          this.isRegister = false;
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
@import 'register.scss';
</style>
